import { ref, onMounted, computed } from "vue";
// import fitChartSize from "@/utils/echartsTool";
import { getSafetyMGTCockpitApi } from "/@/api/centerControl/oms";

const safetyMGTCockpitData = ref({});
const getSafetyMGTCockpit = async () => {
  const res = await getSafetyMGTCockpitApi()
  safetyMGTCockpitData.value = res.data
};
const fetchData = () => {
  // 课程类型
  const typeCourse = computed(() => {
    //
    if (!safetyMGTCockpitData.value) return;
    const colorList = ["#17B1F7", "#B98CED", "#25FFFF", "#85F8C7", "#E1D978"];
    let dataset: []
    dataset = (safetyMGTCockpitData.value.courseTypes || []).map((item, index) => {
      return {
        name: item.v_CourseType,
        value: item.n_CourseTypePopulation,
        percentage: item.f_CourseTypePopulationPercent,
        proportion: item.n_AllPopulation
      };
    });
    // const dataset = [
    //   {
    //     name: "施工安全",
    //     value: 11,
    //     proportion: 56
    //   },
    //   {
    //     name: "法律法规",
    //     value: 11,
    //     proportion: 42.4
    //   },
    //   {
    //     name: "作业实操",
    //     value:11,
    //     proportion: 1
    //   },
    //   {
    //     name: "职业健康",
    //     value: 11,
    //     proportion: 51
    //   }
    // ];
    const radius = ["40%", "50%", "58%"];
    const center = ["25%", "50%"];
    const unit = '人';
    const seriesData = dataset.map((item, index) => {
      return {
        value: item.value,
        name: item.name,
        itemStyle: {
          borderWidth: 4,
          borderColor: "transparent"
        }
      };
    });
    const total = dataset.reduce((prev, cur) => {
      return prev + cur.value;
    }, 0);

    function _pie2() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#01C2F7",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        }
      }
      return dataArr;
    }

    let option = {
      grid: {
        top: "10%",
        left: "10%",
        right: "6%",
        bottom: "14%",
      },
      color: colorList,
      legend: {
        show: true,
        orient: "vertical",
        right: '4%',
        top: "middle",
        data: dataset,
        itemWidth: 10,
        itemHeight: 10,
        formatter: function (name) {
          let objItem = dataset.find((item) => item.name === name);
          if (objItem?.proportion) {
            return `{label| ${name} }  {dataValue|${objItem.value}}{valueUilt|${unit}}{valueUilt1| ${objItem.percentage}%}`;
          }

        },
        itemGap: 6,
        textStyle: {
          color: "#fff",
          rich: {
            label: {
              width: 100,
              ellipsis: '...',
              fontSize: 12,
              color: "rgb(129, 163, 172)",
            },
            dataValue: {
              textShadowBlur: 10,
              fontSize: 12,
              color: "rgb(0, 255, 253)",
              verticalAlign: 'bottom'
            },
            valueUilt: {
              fontSize: 12,
              color: "rgb(0, 255, 253)",
              verticalAlign: 'bottom',
              textShadowBlur: 10,
            },
          }
        },

      },

      tooltip: {
        trigger: "item"
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: radius?.[2]?.endsWith("%")
            ? [radius?.[2], Number(radius?.[2].slice(0, -1)) + 10 + "%"]
            : [radius?.[2], Number(radius?.[2]) + 14] || ["65%", "75%"],
          center: center || ["200", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: seriesData,
          tooltip: {
            formatter: function (params) {
              return (
                params.marker +
                params.name +
                " : " +
                params.value +
                unit
              );
            }
          }
        },
        {
          name: "虚线",
          type: "pie",
          zlevel: 3,
          silent: true,
          radius: radius?.[1]?.endsWith("%")
            ? [radius?.[1], Number(radius?.[1]?.slice(0, -1)) + 1 + "%"]
            : [radius?.[1], Number(radius?.[1]) + 1] || ["51%", "52%"],
          center: center || ["200", "50%"],
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: _pie2()
        },
        {
          //内圆
          name: "内圆",
          type: "pie",
          radius: radius?.[0] || "38%",
          // center: ['50%', '50%'],
          center: center || ["200", "50%"],
          z: 1,
          itemStyle: {
            normal: {
              color: "#0A2D4F",

              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: "center", // 展示在中间位置
              formatter: () => {
                return `{a|${total}}\n{b| ${"人员总数"}}`;
              },
              rich: {
                a: {
                  color: "rgb(255, 255, 255)",
                  fontSize: 14,
                  fontWeight: "bold"
                },
                b: {
                  color: "rgb(255, 255, 255)",
                  fontSize: 12,
                }
              }
            }
          },
          hoverAnimation: false,
          tooltip: {
            show: false
          },
          data: [100]
        }
      ],
    };
    return option;
  });

  // 证书类型
  const certificateType = computed(() => {
    if (!safetyMGTCockpitData.value) return;
    const colorList = ["#17B1F7", "#B98CED", "#25FFFF", "#85F8C7", "#E1D978"];
    let dataset: []
    dataset = (safetyMGTCockpitData.value.cretList || []).map((item, index) => {
      return {
        name: item.v_TypeName,
        value: item.n_Count,
        percentage: item.f_Percent,
      };
    });
    const radius = ["40%", "50%", "58%"];
    const center = ["25%", "50%"];
    const unit = '人';
    const seriesData = dataset.map((item, index) => {
      return {
        value: item.value,
        name: item.name,
        itemStyle: {
          borderWidth: 4,
          borderColor: "transparent"
        }
      };
    });

    // safetyMGTCockpitData.value.n_AllCarrierCount || 
    const total = dataset.reduce((prev, cur) => {
      return prev + cur.value;
    }, 0);

    function _pie2() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#01C2F7",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          });
        }
      }
      return dataArr;
    }

    let option = {
      grid: {
        top: "10%",
        left: "10%",
        right: "6%",
        bottom: "14%",
      },
      color: colorList,
      legend: {
        show: true,
        orient: "vertical",
        right: '4%',
        top: "middle",
        data: dataset,
        itemWidth: 10,
        itemHeight: 10,
        formatter: function (name) {
          let objItem = dataset.find((item) => item.name === name);
          return `{label| ${name} }  {dataValue|${objItem.value}}{valueUilt|${unit}}{valueUilt1| ${objItem.percentage}%}`;
        },
        itemGap: 6,
        textStyle: {
          color: "#fff",
          rich: {
            label: {
              width: 100,
              ellipsis: '...',
              fontSize: 12,
              color: "rgb(129, 163, 172)",
            },
            dataValue: {
              textShadowBlur: 10,
              fontSize: 12,
              color: "rgb(0, 255, 253)",
              verticalAlign: 'bottom'
            },
            valueUilt: {
              fontSize: 12,
              color: "rgb(0, 255, 253)",
              verticalAlign: 'bottom',
              textShadowBlur: 10,
            },
          }
        },

      },

      tooltip: {
        trigger: "item"
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: radius?.[2]?.endsWith("%")
            ? [radius?.[2], Number(radius?.[2].slice(0, -1)) + 10 + "%"]
            : [radius?.[2], Number(radius?.[2]) + 14] || ["65%", "75%"],
          center: center || ["200", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: seriesData,
          tooltip: {
            formatter: function (params) {
              return (
                params.marker +
                params.name +
                " : " +
                params.value +
                unit
              );
            }
          }
        },
        {
          name: "虚线",
          type: "pie",
          zlevel: 3,
          silent: true,
          radius: radius?.[1]?.endsWith("%")
            ? [radius?.[1], Number(radius?.[1]?.slice(0, -1)) + 1 + "%"]
            : [radius?.[1], Number(radius?.[1]) + 1] || ["51%", "52%"],
          center: center || ["200", "50%"],
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: _pie2()
        },
        {
          //内圆
          name: "内圆",
          type: "pie",
          radius: radius?.[0] || "38%",
          // center: ['50%', '50%'],
          center: center || ["200", "50%"],
          z: 1,
          itemStyle: {
            normal: {
              color: "#0A2D4F",

              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: "center", // 展示在中间位置
              formatter: () => {
                return `{a|${total}}\n{b| ${"人员总数"}}`;
              },
              rich: {
                a: {
                  color: "rgb(255, 255, 255)",
                  fontSize: 14,
                  fontWeight: "bold"
                },
                b: {
                  color: "rgb(255, 255, 255)",
                  fontSize: 12,
                }
              }
            }
          },
          hoverAnimation: false,
          tooltip: {
            show: false
          },
          data: [100]
        }
      ],
    };
    return option;
  });

  onMounted(() => {
    getSafetyMGTCockpit()
  });

  return {
    certificateType,
    typeCourse,
    safetyMGTCockpitData
  };
};

export default fetchData;
